<template>
  <div id="app">
    <Topbar :key="tobarkey"></Topbar>
    <Header></Header>
    <router-view @updataTopBar="updataTopBarFn"></router-view>
    <Footer></Footer>
    <login v-show="isShowLoginModel"></login>
    <transition name="show">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import Topbar from "./components/Topbar"
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"
import { jingpinAPT, remenAPT, UserProfilesAPT } from "./request/api"
import login from "./components/login.vue"
import { mapState } from "vuex"
import Toast from "./components/Toast.vue"
export default {
  data() {
    return {
      tobarkey: 0
    }
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.tobarkey++
        }
      }
    }
  },
  components: {
    Topbar,
    Header,
    Footer,
    login,
    Toast

  },
  computed: {
    ...mapState({
      // 属性:state=>state.模块名称.属性名
      // 模态框
      isShowLoginModel: (state) => state.showModal.isShowLoginModel,
      // 提示框
      isShowToast: state => state.isShowToast.isShowToast
    })
  },
  methods: {
    updataTopBarFn() {
      this.tobarkey++
    }
  }
  // async created() {
  //   let use = await UserProfilesAPT()
  //   console.log(use);
  // }

}
</script>

<style lang="less">
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.show-enter-active {
  transition: all .3s ease;
}

.show-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.show-enter,
.show-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(10px);
  opacity: 0;
}
</style>
